*, *:before, *:after {
  box-sizing: border-box;}

body {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(10, 100px);
  grid-auto-rows: minmax(5px, 100px);
  column-gap: 5px;
  row-gap: 35px;
}

button {
  cursor: cell;
  background-color: rgba(255, 255, 255, 0);
  border: none;
  outline: none;
  text-decoration: none;
  font-family: 'Notable', sans-serif;
  font-size: 12px;
  color: red;
  vertical-align: super;
  float: left;
  padding: 10px 10px;
}

button:hover{
  opacity: .4;
}

.reveal1 {
  display: none;
  text-align: center; 
  color: rgb(0, 0, 0);
  opacity: 1;
  transition: opacity 1s;
}
.reveal2 {
  display: none;
  text-align: center; 
  color: rgb(0, 0, 0);
  opacity: 1;
  transition: opacity 1s;
}
.reveal3 {
  display: none;
  text-align: center; 
  color: rgb(0, 0, 0);
  opacity: 1;
  transition: opacity 1s;
}
.reveal4 {
  display: none;
  text-align: center; 
  color: rgb(0, 0, 0);
  opacity: 1;
  transition: opacity 1s;
}
.reveal5 {
  display: none;
  text-align: center; 
  color: rgb(0, 0, 0);
  opacity: 1;
  transition: opacity 1s;
}
.reveal6 {
  display: none;
  text-align: center; 
  color: rgb(0, 0, 0);
  opacity: 1;
  transition: opacity 1s;
}
.reveal7 {
  display: none;
  text-align: center; 
  color: rgb(0, 0, 0);
  opacity: 1;
  transition: opacity 1s;
}
.reveal8 {
  display: none;
  text-align: center; 
  color: rgb(0, 0, 0);
  opacity: 1;
  transition: opacity 1s;
}
.reveal9 {
  display: none;
  text-align: center; 
  color: rgb(0, 0, 0);
  opacity: 1;
  transition: opacity 1s;
}
.reveal10 {
  display: none;
  text-align: center; 
  color: rgb(0, 0, 0);
  opacity: 1;
  transition: opacity 1s;
}
.reveal11 {
  display: none;
  text-align: center; 
  color: rgb(0, 0, 0);
  opacity: 1;
  transition: opacity 1s;
}
.reveal12 {
  display: none;
  text-align: center; 
  color: rgb(0, 0, 0);
  opacity: 1;
  transition: opacity 1s;
}
.reveal13 {
  display: none;
  text-align: center; 
  color: rgb(0, 0, 0);
  opacity: 1;
  transition: opacity 1s;
}
.reveal14 {
  display: none;
  text-align: center; 
  color: rgb(0, 0, 0);
  opacity: 1;
  transition: opacity 1s;
}
.reveal15 {
  display: none;
  text-align: center; 
  color: rgb(0, 0, 0);
  opacity: 1;
  transition: opacity 1s;
}
.reveal16 {
  display: none;
  text-align: center; 
  color: rgb(0, 0, 0);
  opacity: 1;
  transition: opacity 1s;
}
.reveal17 {
  display: none;
  text-align: center; 
  color: rgb(0, 0, 0);
  opacity: 1;
  transition: opacity 1s;
}
.reveal18 {
  display: none;
  text-align: center; 
  color: rgb(0, 0, 0);
  opacity: 1;
  transition: opacity 1s;
}
.reveal19 {
  display: none;
  text-align: center; 
  color: rgb(0, 0, 0);
  opacity: 1;
  transition: opacity 1s;
}
.reveal20 {
  display: none;
  text-align: center; 
  color: rgb(0, 0, 0);
  opacity: 1;
  transition: opacity 1s;
}
.reveal21 {
  display: none;
  text-align: center; 
  color: rgb(0, 0, 0);
  opacity: 1;
  transition: opacity 1s;
}
.reveal22 {
  display: none;
  text-align: center; 
  color: rgb(0, 0, 0);
  opacity: 1;
  transition: opacity 1s;
}
.reveal23 {
  display: none;
  text-align: center; 
  color: rgb(0, 0, 0);
  opacity: 1;
  transition: opacity 1s;
}
.reveal24 {
  display: none;
  text-align: center; 
  color: rgb(0, 0, 0);
  opacity: 1;
  transition: opacity 1s;
}
.reveal25 {
  display: none;
  text-align: center; 
  color: rgb(0, 0, 0);
  opacity: 1;
  transition: opacity 1s;
}
.reveal26 {
  display: none;
  text-align: center; 
  color: rgb(0, 0, 0);
  opacity: 1;
  transition: opacity 1s;
}
.reveal27 {
  display: none;
  text-align: center; 
  color: rgb(0, 0, 0);
  opacity: 1;
  transition: opacity 1s;
}
.reveal28 {
  display: none;
  text-align: center; 
  color: rgb(0, 0, 0);
  opacity: 1;
  transition: opacity 1s;
}
.reveal29 {
  display: none;
  text-align: center; 
  color: rgb(0, 0, 0);
  opacity: 1;
  transition: opacity 1s;
}
.reveal30 {
  display: none;
  text-align: center; 
  color: rgb(0, 0, 0);
  opacity: 1;
  transition: opacity 1s;
}
.reveal31 {
  display: none;
  text-align: center; 
  color: rgb(0, 0, 0);
  opacity: 1;
  transition: opacity 1s;
}
.reveal32 {
  display: none;
  text-align: center; 
  color: rgb(0, 0, 0);
  opacity: 1;
  transition: opacity 1s;
}
.reveal33 {
  display: none;
  text-align: center; 
  color: rgb(0, 0, 0);
  opacity: 1;
  transition: opacity 1s;
}
.reveal34 {
  display: none;
  text-align: center; 
  color: rgb(0, 0, 0);
  opacity: 1;
  transition: opacity 1s;
}
.reveal35 {
  display: none;
  text-align: center; 
  color: rgb(0, 0, 0);
  opacity: 1;
  transition: opacity 1s;
}
.reveal36 {
  display: none;
  text-align: center; 
  color: rgb(0, 0, 0);
  opacity: 1;
  transition: opacity 1s;
}
.reveal37 {
  display: none;
  text-align: center; 
  color: rgb(0, 0, 0);
  opacity: 1;
  transition: opacity 1s;
}
.reveal38 {
  display: none;
  text-align: center; 
  color: rgb(0, 0, 0);
  opacity: 1;
  transition: opacity 1s;
}
.reveal39 {
  display: none;
  text-align: center; 
  color: rgb(0, 0, 0);
  opacity: 1;
  transition: opacity 1s;
}

sup {
  line-height: -2;
  vertical-align: super;
  position: top;
  top: 0;
  float: left;
}

.header {
  margin-left: 10%;
  margin-right: 10%;
  padding: 20px;
  text-align: center;
}

a:link {
  color: rgb(255, 0, 0);
  text-decoration: none;
}

a:visited {
  color: rgb(255, 0, 0);
}

a:hover {
  color: rgb(255, 0, 0);
  font-style: italic;
}

a:active {
  color: rgb(0, 0, 0);
}

.topleft {
  position: absolute;
  top: 0;
  left: 16px;
}

h1 {
  color: rgb(0, 0, 0);
  text-align: center;
  font-family: 'Fredericka the Great', cursive;
  font-size: 40px;
  font-weight: 500;
  line-height: .5;
}

h2 {
  margin: 3px;
  font-family: 'IM Fell DW Pica', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  text-align: center;
  line-height: .85;
  color: red;
}

h3 {
  font-family: 'IM Fell English', serif;
  font-weight: 400;
  font-size: 17px;
  text-align: justify;
  line-height: 1.10;
}

p {
  margin: 3px;
  font-family: 'IM Fell DW Pica', serif;
  font-style: italic;
  font-weight: 450;
  font-size: 16px;
  text-align: center;
  line-height: .95;
  letter-spacing: .95;
}

.footer {
  left: 0;
  bottom: 5%;
  width: 100%;
  font-family: 'Fredericka the Great', cursive;
  color: rgb(0, 0, 0);
  font-size: 15px;
  font-weight: 450;
  letter-spacing: .95px;   
  text-align: center;
}

[data-aos="spin"] {
  transform: rotate(360deg);
  opacity: 0;
  transition-property: transform, opacity;
}

[data-aos="spin"].aos-animate {
  transform: rotate(0);
  opacity: 1;
}

[data-aos="spin-back"] {
  transform: rotate(-360deg);
  opacity: 0;
  transition-property: transform, opacity;
}

[data-aos="spin-back"].aos-animate {
  transform: rotate(0);
  opacity: 1;
}

[data-aos="spin-half"] {
  transform: rotate(180deg);
  opacity: 0;
  transition-property: transform, opacity;
}

[data-aos="spin-half"].aos-animate {
  transform: rotate(0);
  opacity: 1;
}

[data-aos="spin-half-back"] {
  transform: rotate(-180deg);
  opacity: 0;
  transition-property: transform, opacity;
}

[data-aos="spin-half-back"].aos-animate {
  transform: rotate(0);
  opacity: 1;
}

[data-aos="skew-x"] {
  transform: skewX(45deg);
  opacity: 0;
  transition-property: transform, opacity;
}

[data-aos="skew-x"].aos-animate {
  transform: skewX(0);
  opacity: 1;
}

[data-aos="skew-x-back"] {
  transform: skewX(-45deg);
  opacity: 0;
  transition-property: transform, opacity;
}

[data-aos="skew-x-back"].aos-animate {
  transform: skewX(0);
  opacity: 1;
}

[data-aos="skew-y"] {
  transform: skewY(45deg);
  opacity: 0;
  transition-property: transform, opacity;
}

[data-aos="skew-y"].aos-animate {
  transform: skewY(0);
  opacity: 1;
}

[data-aos="skew-y-back"] {
  transform: skewY(-45deg);
  opacity: 0;
  transition-property: transform, opacity;
}

[data-aos="skew-y-back"].aos-animate {
  transform: skewY(0);
  opacity: 1;
}

@media screen and (max-width: 800px) {
  .aos-item {
    width: 50%;
  }
}